<template>
  <div>
    <div>
      <el-button @click="handleAdd" icon="Promotion" style="margin-left: 10px;width: 150px" type="primary">发布公告</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%;margin-top: 20px" >
      <el-table-column label="封面">
        <template #default="scope">
          <img v-if="scope.row.pic" style="width: 100px;height: 50px" :src="genUrl(scope.row.pic)"/>
          <span v-else>
            暂无
          </span>
        </template>
      </el-table-column>
      <el-table-column label="标题">
        <template #default="scope">
          <div class="notice__text">
             {{scope.row.title}}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="公告内容" align="center">
        <template #default="scope">
          <div class="notice__text">
            {{scope.row.content}}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="访问次数" align="center">
        <template #default="scope">
          <el-tag >{{ scope.row.visit}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="评论" align="center">
        <template #default="scope">
          <el-tag >{{ scope.row.pinglun}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="360" align="center">
        <template #default="scope">
          <el-button size="small" type="primary"   @click="openPingLun(scope.row)">
            查看评论
          </el-button>
          <el-button size="small"  @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination layout="prev, pager, next,sizes" :default-current-page="pages.page" :total="pages.total" :page-sizes="[5, 20, 30, 40, 50, 100]" :page-size="pages.limit"

                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
    />

    <el-dialog v-if="dialogFormVisible" v-model="dialogFormVisible" title="" width="500">
      <el-form :model="form">
        <el-form-item label="封面:">
          <upload  v-if="dialogFormVisible" :limit="1" @change="change" :value="form.bannerUrl"></upload>
        </el-form-item>

        <el-form-item label="标题:">
          <el-input type="textarea" v-model="form.title" autocomplete="off" />
        </el-form-item>

        <el-form-item label="公告内容:">
          <el-input type="textarea" v-model="form.content" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="upData">
            {{form.id != undefined ? '更新' : '新增'}}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="showPingLun" width="480">

      <div style="position: relative;width: 400px;display: inline-block;vertical-align: top;height: calc(100vh - 120px);border: #d6d9dc 4px solid; border-radius: 10px;margin-left: 10px;overflow: scroll;">
        <div style="width: 100%;height: calc(100% - 40px);overflow: scroll">
          <div style="width: calc(100% - 50px);margin: 20px" v-for="(p,k) in pingList" >
            <div>
              <el-avatar :src="p.sex == 1 ? '/nan.jpg' : '/nv.jpg'" :size="30">{{p.name.substring(0,1)}}</el-avatar>
              <span style="margin-left: 10px;position: relative;top: -7px">{{p.name}}</span>
            </div>
            <div style="border-radius: 8px;border: 2px solid #e9ebef;padding: 10px;margin: 10px">
              {{p.introduce}}
            </div>
          </div>
          <div style="width: 100%;height: 30px">

          </div>
        </div>


        <div style="width: 100%;height: 40px;">
          <div style="margin-top: 6px">
            <el-input v-model="ping.introduce" placeholder="想说点什么~" style="width: calc(100% - 80px)"></el-input>
            <el-button icon="Position" style="width: 80px" @click="submit">发送</el-button>
          </div>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script lang="ts" setup>
import {Timer, User} from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import Upload from "@/components/Upload.vue";
import { onBeforeMount, onMounted } from "vue";
import http  from "@/util/http-util";
import {ElMessage} from "element-plus";

interface Notice {
  id: number
  title :string
  content: string
  createTime:string,
  visit:number,
  pinglun:number,
  pic:string
}
const dialogFormVisible = ref(false)
const upData = () => {

  http.POST("/manage/addOrEditNotice",form.value).then((response) => {
    if (response.code == 0){
      ElMessage.success("更新成功")
      dialogFormVisible.value = false;
      loadData();
    }
  })

}

const handleSizeChange = (val: number) => {
  pages.value.limit = val;
  loadData();
}
const handleCurrentChange = (val: number) => {
  pages.value.page = val;
  loadData();
}

const handleAdd = () => {
  dialogFormVisible.value = true
  form.value = {
    id: undefined,
    bannerUrl :'',
    introduce: '',
    sort:1
  };
}

const handleEdit = (index: number, row: Notice) => {
  console.log("row",row)
  form.value = {...row};
  console.log("row2",form.value)
  dialogFormVisible.value = true
}
const handleDelete = (index: number, row: Notice) => {
  http.POST("/manage/deleteNotice",row).then((response) => {
    if (response.code == 0) {
      ElMessage.success("删除成功");
      loadData();
    }
  })
}
const change= (url)=>{
  form.value.pic = url;
}

const genUrl = (url)=>{
  return http.genUrl(url);
}

const tableData = ref<Notice[]>([

])


const form = ref<any>({
  id: undefined,
  title :'',
  content: '',
  createTime:1
})

const pages = ref<any>({
  total:0,
  limit:5,
  page:1,
});

const showPingLun = ref(false);

const loadData = ()=>{
  console.log("ppp",pages.value)
  http.GET("/manage/getNoticeList",pages.value).then((res)=>{
    tableData.value = res.data.records;
    pages.value.total =  res.data.total;
  })
}


const req = ref({
  id: undefined
})

const pingList = ref([])
const loadPing = ()=>{
  http.GET("/consume/pinglun-list",req.value).then(rep=>{
    if (rep.code == 0){
      pingList.value = rep.data
    }
  })
}


const ping = ref({
  noticeId:undefined,
  introduce:undefined,
})

const openPingLun = (r)=>{
   showPingLun.value = true;
   ping.value.noticeId = r.id;
   req.value.id = r.id;
   loadPing()
}

const submit = ()=>{
  http.POST("/consume/pinglun",ping.value).then(rep=>{
    if (rep.code == 0){
      ping.value.introduce = undefined;
      loadPing();
      ElMessage.success("评论成功！")
    }
  })
}

onBeforeMount(()=>{
  loadData();
})
</script>

<style>
.notice__text{
  width: 100%;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;
}
</style>